<template>
	<div class="d-flex justify-content-around role-edit">
		<div class="module-select">
			<div class="title">选择模块</div>
			<div class="list">
				<ul>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
				</ul>
			</div>
			<div class="btn">
				<el-button type="primary" size="small">全选</el-button>
				<el-button size="small">取消</el-button>
			</div>
		</div>
		<div class="operate-select">
			<div class="title">选择模块</div>
			<div class="list">
				<ul>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
					<li>
						<el-checkbox class="ml-3" @click="changeToUsing">启用</el-checkbox>
					</li>
				</ul>
			</div>
			<div class="btn">
				<el-button type="primary" size="small">全选</el-button>
				<el-button size="small">取消</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
        name: 'SystemRoleEdit',
        methods: {
            changeToUsing() {

			}
        }
	}

</script>

<style lang="scss" scoped>
    .role-edit{
        ul{list-style: none; padding-left: 0;}
        li{ margin: 10px 0; }
        .module-select, .operate-select{
            width: 300px;
            border: 1px solid #ddd;
            position: relative;
            padding-bottom: 50px;
        }
        .title{
            text-align: center;
            line-height: 30px;
            background: #eee;
        }
        .list{
            max-height: 400px;
            overflow: auto;
        }
        .btn{
            position: absolute;
            bottom: 0;
        }
    }
</style>
